<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>

<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_url[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" value="{name}" style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('AdminActivity/index',['id'=>$org_id])}">{$org}活动管理</a></li>
        <li class="active"><a href="{:url('AdminActivity/add')}">添加活动</a></li>
    </ul>
    <form action="{:url('AdminActivity/addsPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <input type="hidden" name="id" value="{$id|default=''}">
        <input type="hidden" name="org_id" value="{$org_id|default=''}">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>

                    <tr>
                        <th>活动主题<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="title"
                                   id="title" required value="{$data.title|default=''}" placeholder="请输入标题"/>
                        </td>
                    </tr>

                    <tr>
                        <th>报名上限人数（默认为0无限制）<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="number" name="max_people"
                                   id="max" required value="{$data.max_people|default=''}" style="width: 10%"/>
                        </td>
                    </tr>

                    <tr>

                    <tr>
                        <th><b>活动日期</b></th>
                        <td>
                            <div style="display: inline">
                            开始日期：
                            <input class="datetime" type="text" name="start_date" style="width: 40%"
                                   value="{$data.start_date|default=time()|date='Y-m-d'}">
                            结束日期：
                            <input class="datetime" type="text" name="end_date" style="width: 40%"
                                   value="{$data.end_date|default=time()|date='Y-m-d'}">
                                </div>
                        </td>
                    </tr>

                    <tr>
                        <th><b>活动时间段</b></th>
                        <td>
                            <ul id="time" class="pic-list list-unstyled form-inline">
                                开始时间：<input class="start_time time" type="text" name="start_time[]"  style="width: 30%" value="">
                                结束时间：<input class="end_time time" type="text" name="end_time[]" style="width: 30%" value="">
                                <div class="add_time btn btn-xs btn-success">添加</div></br>
                            </ul>
                                <if condition="isset($id)||isset($copy)">
                                    <foreach name="$data.time" id="v" key="k">
                                        <ul class="pic-list list-unstyled form-inline">
                                    开始时间：<input class="start_time time" type="text" name="start_time[]"  style="width: 30%" value="{$v[0]}">
                                    结束时间：<input class="end_time time" type="text" name="end_time[]" style="width: 30%" value="{$v[1]}">
                                    <div class="move_time btn btn-xs btn-danger">移除</div></br>
                                        </ul>
                                    </foreach>
                                </if>
                        </td>
                    </tr>

                    <th>选择活动地点</th>
                    <td>

                        <div id="allmap" style="height:400px;width:800px;"></div>
                        <!--<ul id="places" class="pic-list list-unstyled form-inline">-->

                        <!--</ul>-->
                        <ul id="places" class="pic-list list-unstyled form-inline">
                        <if condition="isset($id)||isset($copy)">
                            <foreach name="$data.place" id="v" key="k">
                            <div style="display: inline"><input class="form-control"  type="hidden" name="point[]" id="point" value="{$data.point[$k]|default=''}"
                            placeholder="请输选择活动地点坐标">
                            <input class="form-control"  style="width: 700px" type="text" name="place[]" id="place" value="{$v|default=''}"
                            placeholder="请输选择活动地址"><button class="editdelete btn btn-xs btn-danger">移除</button><br></div>
                            </foreach>
                        </if>

                        </ul>
                    </td>
                    </tr>
                    <tr>
                        <th>内容</th>
                        <td>
                            <script type="text/plain" id="content" name="content">{$data.content|default=''}</script>
                        </td>
                    </tr>

                  <if condition="$condition">
                    <tr>
                        <th>成果展示</th>
                        <td>
                            <script type="text/plain" id="contents" name="show">{$data.show|default=''}</script>
                        </td>
                    </tr>
                  </if>
                    <tr>
                        <th>附件</th>
                        <td>
                            <ul id="files" class="pic-list list-unstyled form-inline">
                            </ul>
                            <a href="javascript:uploadMultiFile('附件上传','#files','files-item-tpl','file');"
                               class="btn btn-sm btn-default">选择文件</a>
                        </td>
                    </tr>

                </table>
                <hook name="portal_admin_article_edit_view_main"/>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                        <a class="btn btn-default" href="{:url('AdminArticle/index')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <table class="table table-bordered">


                </table>

                <hook name="portal_admin_article_edit_view_right_sidebar"/>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wBxM9CeVsHgYKxWUFHe61fTqQAbytN9s"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
(function(){
    "use strict";
    var _map;
    const geo_url = 'https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4&location=';
    function init_ueditor(){
        var editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }
        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });
    }
    function init_ueditors(){
        var editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('contents');
        try {
            editorcontent.sync();
        } catch (err) {
        }
        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });
    }

    function enable_line_interactive(){
        $(".editdelete").off("click").on("click",function(){
            $(this).parent().remove();
        })
        $(".move_time").off("click").on("click",function(){
            $(this).parent().remove();
        })
    }
    function build_time_html(stime,etime){
        var html='<div style="display: inline">开始时间：<input class="js-bootstrap-datetime  time" type="text" name="start_time[]" style="width: 30%" value="'+stime+'">结束时间：<input class=" js-bootstrap-datetime  time" type="text" name="end_time[]" style="width: 30%" value="'+etime+'"> <button class="move_time btn btn-xs btn-danger">移除</button></br> </div>'
            $('#time').append(html);
             bind_events()
            enable_line_interactive();

    }
    function build_addr_html(addr,location){
        var  html='<div style="display: inline"><input class="form-control"  type="hidden" name="point[]" id="point" value='+location+' placeholder="请输选择活动地点坐标"> <input class="form-control" style="width: 700px" type="text" name="place[]" id="place" value="'+addr+'" placeholder="请输选择活动地址"> <button class="editdelete btn btn-xs btn-danger">移除</button><br></div>'
                $('#places').append(html);
                enable_line_interactive();
    }

    function bind_events(){
          $(".add_time").off("click").on("click",function(e){
                var start_time=$(this).parent().find('.start_time').val()
               var end_time=$(this).parent().find('.end_time').val()
               build_time_html(start_time,end_time);

          });
            var bootstrapDateTimeInput = $(".datetime");
        if (bootstrapDateTimeInput.length) {
                    Wind.css('bootstrapDatetimePicker');
                    Wind.use('bootstrapDatetimePicker', function () {
//                        bootstrapDateTimeInput.datetimepicker('remove')
                        bootstrapDateTimeInput.datetimepicker({
                            minView: "month", //选择日期后，不会再跳转去选择时分秒
                            language:  'zh-CN',
                            format: 'yyyy-mm-dd',
                            todayBtn:  1,
                            autoclose: 1,
                        });
                    });
                }
            var bootstrapDateTimeInputs = $(".time");
            if (bootstrapDateTimeInputs.length) {
                Wind.css('bootstrapDatetimePicker');
                Wind.use('bootstrapDatetimePicker', function () {
                    bootstrapDateTimeInputs.datetimepicker({
                        language: 'zh-CN',
                        format: 'hh:ii',
                        startView:1,
                        ShowUpDown:true,
                        //todayBtn:  false,
                        autoclose: true,
                        weekStart: 1,
                        todayBtn: 1,
                        todayHighlight: 1,
                        minView: 0,
                        maxView: 1,
                        forceParse: 0

                    });
                });
            }
    }
    function init_map(){
        _map = new qq.maps.Map(document.getElementById("allmap"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(35.433327,119.51873),
                zoom: 12,
            });
        qq.maps.event.addListener(_map, 'click', function(e) {
            console.log(e.latLng);
            var _location = e.latLng.lat+','+e.latLng.lng;
            var _query_url = geo_url + _location;
            console.log(_query_url);

          /*
                可优化，加入标注点
            var marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(e.latLng.lat,e.latLng.lng),
                map: _map
            });*/

            $.ajax({
                url:_query_url,
                method:'GET',
                dataType: "jsonp",
                success:function(rsp){

                    if(rsp.status!=0){
                        return alert(rsp.message);
                    }

                    var address = rsp.result.address+rsp.result.formatted_addresses.recommend;
                    build_addr_html(address,_location);
                }
            })
        });       
    }
    $(function(){

        init_map();
        init_ueditor();
        init_ueditors()
        bind_events();
        enable_line_interactive();
    })
})();
</script>
</body>
</html>
